<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息</title>
    <link rel="stylesheet" th:href="@{/api/user/css/order.css}">
    <link rel="stylesheet" th:href="@{/api/user/css/bootstrap-modal.css}">
    <script th:src="@{/api/user/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/api/user/js/order.js}"></script>
    <script th:src="@{/api/user/plugins/sweetalert/sweetalert.min.js}"></script>
    <style media="screen">
        * {
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>

<div id="nav">
    <nav>

        <div class="myjd">
            <h3>我的UFALOWER商城</h3>
            <button onclick="location.href='/user/index'">返回UFALOWER商城首页</button>
        </div>
        <ul class="nav_ul">
            <li>首页</li>
            <li class="li hover">账户设置<i class="ul_i"></i>
                <ol>
                    <li>个人信息</li>
                    <li>账户安全</li>
                    <li>我的尺码</li>
                    <li>账号绑定</li>
                    <li>收货地址</li>
                    <li>用药人信息</li>
                    <li>分享绑定</li>
                    <li>邮件订阅</li>
                    <li>应用授权</li>
                    <li>快捷支付</li>
                    <li>增票资质</li>
                    <li>企业发票</li>
                    <li>采购需求单</li>
                </ol>
            </li>
            <li class="li">社区<i class="ul_i"></i>
                <ol>
                    <li>个人主页</li>
                    <li>我的活动</li>
                    <li>我的圈子</li>
                    <li>我的帖子</li>
                </ol>
            </li>
            <li>消息</li>
        </ul>
        <div class="right">
            <div class="btn">
                <input type="text" placeholder="空调"><button>搜索</button>
            </div>
            <ul class="shop">
                <li><i class="shop_che"></i>我的购物车 >
                    <ol>
                        <li>
                            <img src="img/shop.png" alt="">
                            <div>购物车中还没有商品，赶紧选购吧</div>
                            <div style="clear:both;"></div>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </nav>

</div>
<div style="clear:both;"></div>
<div id="big">
    <div id="bigLeft">
        <ul>
            <h5>设置</h5>
            <li><a href="/user/personal" style="color: #777777">个人信息</a></li>
            <li><a href="/user/address" style="color: #777777">收货地址</a></li>
        </ul>
        <ul>
            <h5>订单中心</h5>
            <li style="color:#E4393C;font-weight:800;"><a href="http://localhost:10002/myorders">我的订单</a></li>
            <li>评价晒单</li>
            <li>我的常购商品<img src="img/new.png"></li>
            <li>购物助手</li>
        </ul>
        <ul>
            <h5>关注中心</h5>
            <li><a href="/user/collect" style="color: #777777">收藏的内容</a><img src="img/new.png"></li>
            <li>浏览历史</li>
        </ul>
        <ul>
            <h5>资产中心</h5>
            <li>小金库</li>
            <li>UMALL商城白条</li>
            <li>领货码</li>
            <li>余额</li>
            <li>UMALL商城钢镚<img src="img/new.png"></li>
        </ul>
        <ul>
            <h5>客户服务</h5>
            <li>返修退换货</li>
            <li>价格保护</li>
            <li>意见建议</li>
            <li>我的问答</li>
            <li>购买咨询</li>
            <li>交易纠纷</li>
            <li>UMALL商城维修</li>
            <li>上门预约服务</li>
            <li>举报中心</li>
        </ul>
    </div>
    <div id="bigRight">
        <div class="myOrder">
            <span style="font-size: 14px;font-weight: 500;color: #9A9A9A;margin-left: 20px">个人信息</span>
        </div>
        <div class="allBig">
            <div class="details">
<!--                头像修改做不来-->
<!--                <form action="##"  th:object="${user}" id="header" enctype="multipart/form-data" onsubmit="return false;">-->
<!--                    <table>-->
<!--                        <tr>-->
<!--                            <td>头像：</td>-->
<!--                            <td>-->
<!--                                <img th:src="*{header}" style="width: 150px;height: 150px">-->
<!--                                <input type="file" id="uploadImage" name="uploadImage"-->
<!--                                       accept="image/gif,image/png,image/jpeg,image/bmp"-->
<!--                                />-->
<!--                            </td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td colspan="2">-->
<!--                                <input type="button" value="修改头像" class="header" onclick="header()"/>-->
<!--                            </td>-->
<!--                        </tr>-->
<!--                    </table>-->
<!--                </form>-->
                <form action="##" th:object="${user}" id="message" onsubmit="return false;" style="float:left">
                    <table>
                        <tr hidden>
                            <td>用户ID：</td>
                            <td><input type="text" th:field="*{id}"></td>
                        </tr>
                        <tr>
                            <td>用户名：</td>
                            <td><input type="text" th:field="*{username}"></td>
                        </tr>
                        <tr>
                            <td>昵称：</td>
                            <td><input type="text" th:field="*{nickname}"></td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td><input type="password" th:field="*{password}"></td>
                        </tr>
                        <tr>
                            <td>生日：</td>
                            <td><input type="date" name="birthday" th:value="*{#dates.format(birthday,'yyyy-MM-dd')}"></td>
                        </tr>
                        <tr>
                            <td>电话：</td>
                            <td><input type="text" th:field="*{phone}"></td>
                        </tr>
                        <tr>
                            <td>邮箱：</td>
                            <td><input type="text" th:field="*{email}"></td>
                        </tr>
                        <tr>
                            <td>性别：</td>
                            <td>
                                <select th:field="*{gender}">
                                    <option th:each="sex : ${genders}" th:value="${sex.value}" th:text="${sex.key}"></option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>注册时间：</td>
                            <td><span th:text="*{#dates.format(createTime,'yyyy-MM-dd')}"></span></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="button" value="修改信息" class="submit" onclick="update()"/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>



                    <div class="footer">
                        <div class="top">
                            <ul>
                                <li class="item fore1">
                                    <i></i>
                                    品类齐全，轻松购物
                                </li>
                                <li class="item fore2">
                                    <i></i>
                                    多仓直发，极速配送
                                </li>
                                <li class="item fore3">
                                    <i></i>
                                    正品行货，精致服务


                                </li>
                                <li class="item fore4">
                                    <i></i>
                                    天天低价，畅选无忧


                                </li>
                                <div style="clear:both;"></div>
                            </ul>
                        </div>
                        <div class="wrap">
                            <div class="wrap1">
                                <div class="wrap2">
                                    <dl>
                                        <dt>购物指南</dt>
                                        <dd>购物流程</dd>
                                        <dd>会员介绍</dd>
                                        <dd>生活旅行/团购</dd>
                                        <dd>常见问题</dd>
                                        <dd>大家电</dd>
                                        <dd>联系客服</dd>
                                    </dl>
                                    <dl>
                                        <dt>配送方式</dt>
                                        <dd>上门自提</dd>
                                        <dd>211限时达</dd>
                                        <dd>配送服务查询</dd>
                                        <dd>配送费收取标准</dd>
                                        <dd>海外配送</dd>

                                    </dl>
                                    <dl>
                                        <dt>支付方式</dt>
                                        <dd>货到付款</dd>
                                        <dd>在线支付</dd>
                                        <dd>分期付款</dd>
                                        <dd>邮局汇款</dd>
                                        <dd>公司转账</dd>
                                    </dl>
                                    <dl>
                                        <dt>公司转账</dt>
                                        <dd>售后政策</dd>
                                        <dd>价格保护</dd>
                                        <dd>退款说明</dd>
                                        <dd>返修/退换货</dd>
                                        <dd>取消订单</dd>


                                    </dl>
                                    <dl>
                                        <dt>特色服务</dt>
                                        <dd>夺宝岛</dd>
                                        <dd>DIY装机</dd>
                                        <dd>延保服务</dd>
                                        <dd>UMALL商城E卡</dd>
                                        <dd>UMALL商城通信</dd>
                                        <dd>UMALL商城gulimall+</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <p class="p1">
                            <a href="#">关于我们</a>
                            <a href="#">联系我们</a>
                            <a href="#">联系客服</a>
                            <a href="#">合作招商</a>
                            <a href="#">合作招商</a>
                            <a href="#">营销中心</a>
                            <a href="#" style="width:80px;">手机UMALL</a>
                            <a href="#">友情链接</a>
                            <a href="#">销售联盟</a>
                            <a href="#" style="width:80px;">UMALL社区</a>
                            <a href="#">风险监测</a>
                            <a href="#">隐私政策</a>
                            <a href="#" style="width:80px;">UMALL公益</a>
                            <a href="#" style="width:80px;">English Site</a>
                            <a href="#" style="border-right: none">Contact Us</a>
                        </p>
                        <p class="p2">
                            <a href="#">京公网安备 11000002000088号</a>
                            <a href="#">京ICP证070359号</a>
                            <a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
                            <a href="#">新出发京零 字第大120007号</a>
                        </p>
                        <p class="p3">
                            <a href="#">互联网出版许可证编号新出网证(京)字150号</a>
                            <a href="#">出版物经营许可证</a>
                            <a href="#">网络文化经营许可证京网文-->[2014]2148-348号</a>
        <a href="#">违法和不良信息举报电话：4006561155</a>
    </p>
    <p class="p4">
        <a href="#">Copyright © 2004 - 2017  UMALL商城umall.com 版权所有</a>
        <a href="#">消费者维权热线：4006067733</a>
        <a href="#">经营证照</a>
    </p>
    <p class="p5">
        <a href="#">UMALL商城旗下网站：UMALL商城钱包</a>
        <a href="#">UMALL商城云</a>

    </p>
    <p class="img">
        <span class="span icon1"></span>
        <span class="span icon2"></span>
        <span class="span icon3"></span>
        <span class="span icon4"></span>
        <span class="span icon5"></span>
        <span class="span icon6"></span>
    </p>
    <div style="clear: both"></div>
</div>
<div class="fixed">

    <div class="teSe">
        <ul>
            <li class="test_li1">
                <ol>
                    <div></div>
                    <li>宽带</li>
                    <li>我的旅行订单</li>
                    <li>夺宝箱</li>
                    <li>我的定期送</li>
                    <li>我的竞拍保证金</li>
                    <li>UMALL商城白条</li>
                    <li>UMALL商城回收</li>
                    <li>装机大师</li>
                    <li>黄金托管业务</li>
                </ol>
            </li>
            <li class="test_li2"></li>
            <li><a href="#" class="test_li3"></a></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    // function header() {
    //     var header = $("#uploadImage").val();
    //     var params = $("#header").serializeArray();
    //     var obj = {};
    //     for (var i = 0; i < params.length; i++) {//数据类型为"自定义类的字段名=数据"后台会自动对数据进行匹配
    //         obj[params[i].name] = params[i].value;
    //     }
    //     console.log(JSON.stringify(obj))
    //     var url = 'http://localhost:30000/oss/policy';
    //     $.ajax({
    //         type: 'POST',
    //         url: url,
    //         data: JSON.stringify(obj),
    //         contentType:'application/json;charset=UTF-8',
    //         success: function (result) {
    //             if (result.code === 0) {
    //                 swal({
    //                     title: "修改成功",
    //                     icon: "success",
    //                     buttons: true,
    //                     dangerMode: true,
    //                 }).then((flag) => {
    //                     if (flag) {
    //                         window.location.href = '/user/personal';
    //                     }
    //                 });
    //             } else {
    //                 swal(result.msg, {
    //                     icon: "error",
    //                 });
    //             }
    //         },
    //         error: function () {
    //             swal("操作失败", {
    //                 icon: "error",
    //             });
    //         }
    //     })
    // }

    function update() {
        // var id = $("#id").val();
        // var username = $("#username").val();
        // var password = $("#password").val();
        // var nickname = $("#nickname").val();
        // var birthday = $("#birthday").val();
        // var phone = $("#phone").val();
        // var email = $("#email").val();
        // var gender = $("#gender").val();
        var params = $("#message").serializeArray();
        // 转为json数据格式
        var obj = {};//分配内存空间
        for (var i = 0; i < params.length; i++) {//数据类型为"自定义类的字段名=数据"后台会自动对数据进行匹配
            obj[params[i].name] = params[i].value;
        }
        console.log(obj)
        console.log(JSON.stringify(obj))
        var url = '/api/user/user/update';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: JSON.stringify(obj),  //请求参数，将对象转json字符串,
            contentType:'application/json;charset=UTF-8', //请求数据类型,
            success: function (result) {
                if (result.code === 0) {
                    swal("个人信息修改成功", {
                        icon: "success",
                    });
                    window.setTimeout(2000).location.href = '/api/user/personal';
                } else {
                    swal(result.msg, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
    var file; // 定义一个全局变量，为一个文本选择器。
    var chooseImage; // 用于上传的文件
    file = $('<input type="file" />'); // 这样file就是jquery创建的一个文本选择器，但是因为我们并没有把它加载到页面上，所以是不可见的。
    // button的单击事件
    $('#chooseImg').click(function(){
        // 启动文件选择
        file.click();
    });
    // 选择好文件后，获取选择的内容
    file.change(function(e){
        var select_file = file[0].files[0];
        // 校验文件名称
        var file_path = file.val();
        var extStart = file_path.lastIndexOf("."); // 按.分隔文件名称
        var ext = file_path.substring(extStart, file_path.length).toUpperCase(); // 取出后缀并转为大写
        if (ext != ".BMP" && ext != ".PNG" && ext != ".JPG" && ext != ".JPEG") {
            bootbox.alert({
                size: "small",
                title: "提示",
                message: "图片仅限于bmp，png，jpg，jpeg的格式！",
                buttons: {
                    ok: {
                        label: '确认',
                        className: 'btn-primary'
                    }
                },
                callback: function(){ /* your callback code */ }
            })
            return false;
        }

        // 校验文件大小
        if (select_file.size > 1048576) {
            bootbox.alert({
                size: "small",
                title: "提示",
                message: "图片大小不能超过1M！！",
                buttons: {
                    ok: {
                        label: '确认',
                        className: 'btn-primary'
                    }
                },
                callback: function(){ /* your callback code */ }
            })
            return false;
        }

        chooseImage = select_file; // 赋值给全局变量 --> 用来做上传的操作

        // 展示到页面
        var reader = new FileReader();// 读取文件URL
        reader.readAsDataURL(chooseImage);
        reader.onload = function() {
            // 读取的URL结果：this.result
            $("#re_headImg").attr("src", this.result).show();
        }

        $("#uploadImg").removeClass("update-head-msg-bt-dis");
        $("#uploadImg").removeAttr("disabled");
        $("#uploadImg").attr("title","选择提交即可上传该图片文件作为头像.");
    });


</script>
</html>